<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>手风琴下拉框</title>
    <script th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
    <link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet"/>
    <script th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.js}"></script>
    <script type="text/javascript">
        /*$(".sideMenu").slide({
            titCell:"h3", //鼠标触发对象
            targetCell:"ul", //与titCell一一对应，第n个titCell控制n个targetCell的显示隐藏
            effect:"slideDown",//targetCell下拉效果
            delayTime:300,//效果时长
            triggerTime:150,//鼠标延迟触发时间（默认150）
            defaultPlay:true,//默认是否执行效果（默认true）
            trigger:"click",
            returnDefault:true//鼠标从.sideMen移走后返回默认状态（默认false）
        })*/
    </script>
<!--</head>-->
<!--<body>-->
    <!--<div class="sideMenu">
        <h3 class="on">我是一级导航</h3>
        <ul style="display: block">
            <li><a href="#">二级导航</a></li>
            <li><a href="#">二级导航</a></li>
            <li><a href="#">二级导航</a></li>
        </ul>
    </div>-->

    <!--<ul class="parentWrap">
        <li class="menuGroup">
            <span class="groupTitle">标题1</span>

            <div>我是弹出来的div1</div>
        </li>
        <li class="menuGroup">
            <span class="groupTitle">标题2</span>

            <div>我是弹出来的div2</div>
        </li>
        <li class="menuGroup">
            <span class="groupTitle">标题3</span>

            <div>我是弹出来的div3</div>
        </li>
        <li class="menuGroup">
            <span class="groupTitle">标题4</span>

            <div>我是弹出来的div4</div>
        </li>
    </ul>-->

<style>
    * {
        margin:0;
        padding:0;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
    }
    body {
        background:#fff;
        font:12px Microsoft YaHei,arial,sans-serif;
    }
    ul {
        list-style-type:none;
    }
    a {
        color:#f39800;
        text-decoration:none;
    }
    /** =======================
     * Contenedor Principal
     ===========================*/
    .list-title {
        display:inline-block;
        width:100%;
        max-width:200px;
        border-top:solid 1px #ccc;
        border-left:solid 1px #ccc;
        border-right:solid 1px #ccc;
        background:#FFF;
        text-align:center;
        height:60px;
        line-height:60px;
        font-size:20px;
        color:#f39800;
        font-weight:bold;
        cursor:pointer;
    }
    h1 {
        color:#FFF;
        font-size:24px;
        font-weight:400;
        text-align:center;
        margin-top:80px;
    }
    h1 a {
        color:#f39800;
        font-size:16px;
    }
    .accordion {
        width:100%;
        max-width:200px;
        border:solid 1px #ccc;
        background:#FFF;
    }
    .accordion .link {
        cursor:pointer;
        display:block;
        padding:15px 15px 15px 42px;
        color:#4D4D4D;
        font-size:14px;
        font-weight:700;
        border-bottom:1px solid #CCC;
        position:relative;
        -webkit-transition:all 0.4s ease;
        -o-transition:all 0.4s ease;
        transition:all 0.4s ease;
    }
    .accordion li:last-child .link {
        border-bottom:0;
    }
    .accordion li {
        cursor:pointer;
    }
    .accordion li i {
        position:absolute;
        top:16px;
        left:12px;
        font-size:18px;
        color:#595959;
        -webkit-transition:all 0.4s ease;
        -o-transition:all 0.4s ease;
        transition:all 0.4s ease;
    }
    .accordion li i.fa-chevron-down {
        right:12px;
        left:auto;
        font-size:16px;
    }
    .accordion li.open .link {
        color:#f39800;
    }
    .accordion li.open i {
        color:#f39800;
    }
    .accordion li.open i.fa-chevron-down {
        -webkit-transform:rotate(180deg);
        -ms-transform:rotate(180deg);
        -o-transform:rotate(180deg);
        transform:rotate(180deg);
    }
    /**
     * Submenu
     -----------------------------*/
    .submenu {
        display:none;
        background:#f5f5f5;
        font-size:14px;
    }
    .submenu li {
        border-bottom:1px solid #d6d7dc;
    }
    .submenu a {
        display:block;
        text-decoration:none;
        color:#666;
        padding:12px;
        padding-left:42px;
        -webkit-transition:all 0.25s ease;
        -o-transition:all 0.25s ease;
        transition:all 0.25s ease;
    }
    .submenu a:hover,.submenu li.current a {
        background:#f39800;
        color:#FFF;
    }
</style>
</head>
<body>
<div class="account-l fl">
<!--    <a class="list-title">图书分类</a>-->
    <ul id="accordion" class="accordion">
        <li>
            <div class="link"><i class="fa fa-leaf"></i>程序设计<i class="fa fa-chevron-down"></i></div>
            <ul class="submenu">
                <li id="shop"><a>查看店铺</a></li>
                <li id="publicproducts"><a>发布产品</a></li>
                <li id="productlists"><a>查看产品</a></li>
                <li id="mysaled"><a>已卖出产品</a></li>
            </ul>
        </li>
       <!-- <li>
            <div class="link"><i class="fa fa-shopping-cart"></i>办公室用书<i class="fa fa-chevron-down"></i></div>
            <ul class="submenu">
                <li id="publishpurchase"><a>发布采购</a></li>
                <li id="postneeds"><a>查看采购</a></li>
                <li id="getneeds"><a>已收到的报价单</a></li>
                <li id="mypricesheet"><a>我的报价单</a></li>
                <li id="concernshop"><a>已关注的店铺</a></li>
                <li id="concerngood"><a>已关注的商品</a></li>
            </ul>
        </li>
        <li>
            <div class="link"><i class="fa fa-pencil-square-o"></i>图形 图像 多媒体<i class="fa fa-chevron-down"></i></div>
            <ul class="submenu">
                <li id="buyerxunpanlist"><a>收到的询盘</a></li>
                <li id="publishrequire"><a>我的询盘</a></li>
            </ul>
        </li>
        <li>
            <div class="link"><i class="fa fa-file-text"></i>操作系统/系统开发<i class="fa fa-chevron-down"></i></div>
            <ul class="submenu">
                <li id="myorder"><a>我的订单</a></li>
                <li id="myrefund"><a>退款申请</a></li>
            </ul>
        </li>
        <li>
            <div class="link"><i class="fa fa-globe"></i>数据库<i class="fa fa-chevron-down"></i></div>
            <ul class="submenu">
                <li id="myloan"><a>我的借贷</a></li>
                <li id="financialmanage"><a>需求申请</a></li>
                <li id="myapplication"><a>我的申请</a></li>
            </ul>
        </li>
        <li>
            <div class="link"><i class="fa fa-unlock-alt"></i>网络与数据通讯<i class="fa fa-chevron-down"></i></div>
            <ul class="submenu">
                <li id="basecomInfo"><a>基本信息</a></li>
                <li id="authenchange"><a>认证信息</a></li>
                <li id="phoneAuth"><a>手机认证</a></li>
                <li id="bankCardAuth"><a>银行卡认证</a></li>
                <li id="emailAuth"><a>邮箱认证</a></li>
                <li id="passwordmodify"><a>密码修改</a></li>
                <li id="paymentpsdmodify"><a>支付密码</a></li>
                <li id="address"><a>收货地址</a></li>
            </ul>
        </li>-->

    </ul></div>

<script>
    $(function() {
        var Accordion = function(el, multiple) {
            this.el = el || {};
            this.multiple = multiple || false;

            // Variables privadas
            var links = this.el.find('.link');
            // Evento
            links.on('click', {
                el: this.el,
                multiple: this.multiple
            }, this.down)
        };

        Accordion.prototype.down = function(e) {
            var $el = e.data.el;
            $this = $(this);
            $next = $this.next();

            $next.slideToggle();
            $this.parent().toggleClass('open');

            if (!e.data.multiple) {
                $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
            }
        };

        var accordion = new Accordion($('#accordion'), false);
        $('.submenu li').click(function() {
            $(this).addClass('current').siblings('li').removeClass('current');
        });
    });
</script>
</body>
</html>